<template>
  <div class="kl-index">
    <!-- 顶部搜索 -->
    <div class="kl-head">
      <div class="mui-pull-left kl-left">
        <img src="../../images/lang.jpg">
      </div>
      <div class="mui-pull-right kl-right">
        <span class="mui-icon mui-icon-person"
              @tap="my"></span>
      </div>
      <div class="kl-search">
        <span class="mui-icon mui-icon-search"></span>
        <input type="search"
               placeholder="请输入你想要的内容"
               @tap="search">
      </div>
    </div>
    <!-- 滑动导航 -->
    <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
      <div class="mui-scroll">
        <a class="mui-control-item mui-active">
          推荐
        </a>
        <a class="mui-control-item">
          手机
        </a>
        <a class="mui-control-item">
          智能
        </a>
        <a class="mui-control-item">
          电视
        </a>
        <a class="mui-control-item">
          笔记本
        </a>
        <a class="mui-control-item">
          生活周边
        </a>
        <a class="mui-control-item">
          家电
        </a>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="kl-swipe">
      <!-- 这里绑定lunbotu的属性进行传值 -->
      <indexLunBo :lunbotu="indexLunBo"
                  style="height:3.6rem"></indexLunBo>
    </div>
    <!-- 每日精选 -->
    <div class="jinxuan">
      <h3>每日精选</h3>
      <ul class="clearfix">
        <li v-for="item in jingXuan"
            :key="item.id">
          <a>
            <img v-lazy="item.url">
            <div class="info">
              <p class="title">{{ item.title }}</p>
              <p class="subtitle">{{ item.subtitle }}</p>
              <span class="newpric">￥{{ item.newprice }}</span>
              <span class="oldpric">￥{{ item.old }}</span>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <!-- 小米电视 -->
    <div class="dianshi">
      <h3>小米电视</h3>
      <ul class="clearfix">
        <li v-for="item in dianShi"
            :key="item.id">
          <a>
            <img v-lazy="item.url">
            <div class="info">
              <p class="title">{{ item.title }}</p>
              <p class="subtitle">{{ item.subtitle }}</p>
              <span class="newpric">￥{{ item.newprice }}</span>
              <span class="oldpric">￥{{ item.old }}</span>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <!-- 小米笔记本 -->
    <div class="nootbook">
      <h3>小米笔记本</h3>
      <ul class="clearfix">
        <li v-for="item in nootbook"
            :key="item.id">
          <a>
            <img v-lazy="item.url">
            <div class="info">
              <p class="title">{{ item.title }}</p>
              <p class="subtitle">{{ item.subtitle }}</p>
              <span class="newpric">￥{{ item.newprice }}</span>
              <span class="oldpric">￥{{ item.oldprice }}</span>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <!-- 小米家电 -->
    <div class="jiadian">
      <h3>小米家电</h3>
      <ul class="clearfix">
        <li v-for="item in jiadian"
            :key="item.id">
          <a>
            <img v-lazy="item.url">
            <div class="info">
              <p class="title">{{ item.title }}</p>
              <p class="subtitle">{{ item.subtitle }}</p>
              <span class="newpric">￥{{ item.newprice }}</span>
              <span class="oldpric">￥{{ item.oldprice }}</span>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>

</template>
<script>
import indexLunBo from '../public/swipe'
import mui from '../../mui/js/mui.min.js'

export default {
  data () {
    return {
      indexLunBo: null,
      jingXuan: null,
      dianShi: null,
      nootbook: null,
      jiadian: null
    }
  },
  created () {
    this.getLunBo()
    this.getJingXuan()
    this.getDianShi()
    this.getNootBook()
    this.getJiaDian()
  },
  mounted () {
    mui('.mui-scroll-wrapper').scroll({
      deceleration: 0.0005 // flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    })
    // (function ($) {
    //   $('.mui-scroll-wrapper').scroll({
    //     deceleration: mui.os.ios ? 0.003 : 0.0009
    //   })
    // })(mui)
    // var vm = this

    // vm.$nextTick(() => {
    //   mui('.mui-scroll-wrapper').scroll({
    //     deceleration: 0.0005 // flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    //   })
    // })
    // this.$nextTick(function () {
    //   mui('.mui-scroll-wrapper').scroll({
    //     deceleration: 0.0005 // flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    //   })
    // })
  },
  methods: {
    getLunBo () {
      this.$http.get('/tuiJianLunBo').then(function (result) { // 获取首页中的轮播图数据
        this.indexLunBo = result.body
      })
    },
    getJingXuan () {
      this.$http.get('/tuiJainJingXuan').then(function (result) {
        this.jingXuan = result.body
      })
    },
    getDianShi () {
      this.$http.get('/tuiJianDianShi').then(function (result) {
        this.dianShi = result.body
      })
    },
    getNootBook () {
      this.$http.get('/tuiJianNootBook').then(function (result) {
        this.nootbook = result.body
      })
    },
    getJiaDian () {
      this.$http.get('/tuiJianJiaDian').then(function (result) {
        this.jiadian = result.body
      })
    },
    my () {
      this.$router.push('/my')
    },
    search () {
      this.$router.push('/search')
    }
  },
  components: {
    indexLunBo
  },
  props: ['lunbotu']
}
</script>
<style lang="less" scoped>
.kl-index {
  // margin-bottom: 50px;
  .kl-head {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 84rem / @baseFontSize;
    background-color: @klcolor;
    .kl-left {
      img {
        position: absolute;
        left: 10rem / @baseFontSize;
        top: 10rem / @baseFontSize;
        width: 50rem / @baseFontSize;
        height: 50rem / @baseFontSize;
      }
    }
    .kl-right {
      span {
        position: absolute;
        right: 10rem / @baseFontSize;
        top: 10rem / @baseFontSize;
        font-size: 50rem / @baseFontSize;
      }
    }
    .kl-search {
      padding: 10rem / @baseFontSize 75rem / @baseFontSize;
      span {
        position: absolute;
        left: 90rem / @baseFontSize;
        top: 20rem / @baseFontSize;
        font-size: 40rem / @baseFontSize;
      }
      input {
        height: 60rem / @baseFontSize;
        padding-left: 60rem / @baseFontSize;
      }
    }
  }
  .mui-scroll-wrapper {
    margin-top: 84rem / @baseFontSize;
    background-color: #ddd;
    .mui-scroll {
      .mui-control-item.mui-active {
        color: @klcolor;
      }
    }
  }
  // 商品布局
  .jinxuan,
  .dianshi,
  .nootbook,
  .jiadian {
    padding: 10rem / @baseFontSize;
    h3 {
      padding-bottom: 10rem / @baseFontSize;
    }
    ul {
      li {
        width: 49%;
        border: 1px solid #999;
        box-shadow: 0 0 5rem / @baseFontSize #ccc;
        float: left;
        margin-bottom: 10rem / @baseFontSize;
        &:nth-child(even) {
          margin-left: 10rem / @baseFontSize;
        }
        a {
          width: 100%;
          display: block;
          img {
            width: 100%;
            height: 360rem / @baseFontSize;
          }
          .info {
            width: 100%;
            height: 150rem / @baseFontSize;
            position: relative;
            .title {
              padding: 10rem / @baseFontSize 0;
              text-align: center;
              font-size: 28rem / @baseFontSize;
              color: #000;
            }
            .subtitle {
              text-align: center;
              font-size: 22rem / @baseFontSize;
              color: rgba(0, 0, 0, 0.54);
              line-height: 22rem / @baseFontSize;
            }
            span {
              position: absolute;
              bottom: 10rem / @baseFontSize;
            }
            .newpric {
              color: red;
              font-size: 28rem / @baseFontSize;
              left: 20rem / @baseFontSize;
            }
            .oldpric {
              font-size: 18rem / @baseFontSize;
              color: #ccc;
              text-decoration: line-through;
              right: 40rem / @baseFontSize;
            }
          }
        }
      }
    }
  }
}
.mui-segmented-control.mui-segmented-control-inverted
  .mui-control-item.mui-active {
  border-bottom: @klcolor;
}

// 懒加载
img[lazy="loading"] {
  width: 40px;
  height: 300px;
  margin: auto;
}

// .mint-swipe {
//   height: 360rem / @baseFontSize;
// }
// .mint-swipe[data-v-52a9aa24] {
//   height: 360rem / @baseFontSize;
// }
</style>
